<template>
  <a-card title="订单统计">
    <template #extra>
      <a-button :danger="orderType=='date'" type="primary" size="small"  @click="handleLoadDataFilter('date')">天</a-button>
      <a-button :danger="orderType=='month'" type="primary" style="margin: 0 10px" size="small"  @click="handleLoadDataFilter('month')">月</a-button>
      <a-button :danger="orderType=='year'"  type="primary" size="small"  @click="handleLoadDataFilter('year')">年</a-button>
    </template>
    <div id="orderChart" style="width:100%;height:380px;"></div>
  </a-card>
</template>
<script setup>
import * as echarts from 'echarts';

const orderType = ref("date")
const props = defineProps({
  chartId:{
    type:String,
    default:"order-charts"
  }
})

const handleLoadOrderCharts = (date,data) => {
  nextTick(() => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("orderChart"));
    var option = {
      tooltip: {
        trigger: 'axis',
        position: function (pt) {
          return [pt[0], '10%'];
        }
      },
      title: {
        left: 'center',
        text: ''
      },
      toolbox: {
        feature: {
          dataZoom: {
            yAxisIndex: 'none'
          },
          restore: {},
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: date
      },
      yAxis: {
        type: 'value',
        boundaryGap: [0, '100%']
      },
      dataZoom: [
        {
          type: 'inside',
          start: 0,
          end: 30
        },
        {
          start: 0,
          end: 30
        }
      ],
      series: [
        {
          name: '订单销售数量：',
          type: 'bar',
          symbol: 'none',
          sampling: 'lttb',
          itemStyle: {
            color: 'rgb(255, 70, 131)'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(255, 158, 68)'
              },
              {
                offset: 1,
                color: 'rgb(255, 70, 131)'
              }
            ])
          },
          data: data
        }
      ]
    };
    // 绘制图表
    myChart.setOption(option);

    myChart.on('click', 'series', function (params) {
      console.log("1", params);
    });
    myChart.on('click', function (params) {
      console.log("2", params);
    });

    window.addEventListener('resize', function () {
      myChart.resize();
    });

  })
}
const handleLoadData = async ()=>{
  const resp = await useStateOrderDataApi(orderType.value)
  var date = resp.data.map(c=>c.name)
  var data = resp.data.map(c=>c.nums*1)
  return Promise.resolve({data,date})
}

const handleLoadDataFilter = async (type)=>{
  orderType.value = type
  handleLoadData().then(({data,date})=>{
    handleLoadOrderCharts(date,data)
  })
}


onMounted(() => {
  handleLoadData().then(({data,date})=>{
    handleLoadOrderCharts(date,data)
  })
})

</script>
